<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="#0A5AF9">
    <title>我的</title>
    <link rel="stylesheet" type="text/css" href="../css/public-head.css" />
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
    <style>
        html,
        body {
            background-color: white;
        }

        * {
            margin: 0;
            padding: 0;
        }
        /*头部样式*/

        .mine_1 {
            width: 24px;
            height: 24px;
        }

        .mine_1 img {
            width: 100%;
            height: 100%;
            display: block;
            margin-left: 8px;
        }

        .msg_1 {
            width: 0.53rem;
            height: 0.626rem;
            margin-top: 0.106rem;
            margin-top: -0.5px;
        }

        .msg_1 img {
            width: 100%;
            height: 100%;
            display: block;
            margin-left: -10px;
        }
        /*头部样式结束*/

        .main {
            padding: 10px 0.4rem;
        }

        .banner {
            width: 100%;
            height: 4.933rem;
            margin: 0 auto;
            border-radius: 10px;
            background-image: url(../image/icon/beijjj@2x.png);
            background-size: cover;
            overflow: hidden;
        }

        .banner>div:nth-child(1) {
            width: 90px;
            height: 45px;
            line-height: 45px;
            border: 1px solid #FFFFFF;
            border-radius: 5px;
            text-align: center;
            font-size: 18px;
            color: #FFFFFF;
            margin: 32px auto 0;
        }

        .banner>div:nth-child(2) {
            display: flex;
            margin-top: .9rem;
            padding: 0 10px;
        }

        .banner>div:nth-child(2)>div {
            display: flex;
            flex: 2.5;
            justify-content: center;
            color: white;
            display: block;
            line-height: 30px;
            text-align: center;
        }

        .banner>div:nth-child(2)>div>div:nth-child(1) {
            font-size: 16px;
            font-weight: bold;
            font-family: PingFang-SC-Bold;
        }

        .banner>div:nth-child(2)>div>div:nth-child(2) {
            font-size: 12px;
        }
        /*我的订单*/

        .mine-order {
            margin-top: 12px;
            width: 100%;
            height: 120px;
            padding: 5px 0;
        }

        .mine-order>div:nth-child(1) {
            display: flex;
        }

        .mine-order>div:nth-child(1)>div:nth-child(1) {
            display: flex;
            flex: 5;
            justify-content: flex-start;
        }

        .mine-order>div:nth-child(1)>div:nth-child(2) {
            display: flex;
            flex: 5;
            justify-content: flex-end;
        }

        .mine-order>div:nth-child(1)>div:nth-child(1)>div:nth-child(1) {
            width: 4px;
            height: 17px;
            background-color: #0A5AFA;
        }

        .mine-order>div:nth-child(1)>div:nth-child(1)>div:nth-child(2) {
            font-size: 16px;
            color: #1B1B1B;
            font-weight: 500;
            margin-left: 6px;
            line-height: 22px;
            margin-top: -2px;
        }

        .mine-order>div:nth-child(1)>div:nth-child(2)>div {
            width: 8px;
            height: 15px;
        }

        .mine-order>div:nth-child(1)>div:nth-child(2)>div img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .mine-order>div:nth-child(2) {
            display: flex;
            margin-top: 12px;
        }

        .mine-order>div:nth-child(2)>div {
            text-align: center;
            flex: 3.3;
        }

        .mine-order>div:nth-child(2)>div>div:nth-child(1) {
            width: 50px;
            height: 50px;
            display: inline-block;
        }

        .mine-order>div:nth-child(2)>div>div:nth-child(1) img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .mine-order>div:nth-child(2)>div>div:nth-child(2) {
            color: #333333;
            opacity: 0.82;
            font-size: 14px;
            font-weight: 500;
        }
        /*车辆信息*/

        .car-msg {
            margin-top: 12px;
            width: 100%;
            height: 120px;
            padding: 5px 0;
        }

        .car-msg>div:nth-child(1) {
            display: flex;
        }

        .car-msg>div:nth-child(1)>div:nth-child(1) {
            display: flex;
            flex: 5;
            justify-content: flex-start;
        }

        .car-msg>div:nth-child(1)>div:nth-child(2) {
            display: flex;
            flex: 5;
            justify-content: flex-end;
        }

        .car-msg>div:nth-child(1)>div:nth-child(1)>div:nth-child(1) {
            width: 4px;
            height: 17px;
            background-color: #0A5AFA;
        }

        .car-msg>div:nth-child(1)>div:nth-child(1)>div:nth-child(2) {
            font-size: 16px;
            color: #1B1B1B;
            font-weight: 500;
            margin-left: 6px;
            line-height: 22px;
            margin-top: -2px;
        }

        .car-msg>div:nth-child(1)>div:nth-child(2)>div:nth-child(1) {
            color: #1B1B1B;
            font-size: 13px;
            font-weight: 500;
            margin-right: 7px;
            margin-top: -3px;
        }

        .car-msg>div:nth-child(1)>div:nth-child(2)>div:nth-child(2) {
            width: 8px;
            height: 15px;
        }

        .car-msg>div:nth-child(1)>div:nth-child(2)>div:nth-child(2) img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .car-msg>div:nth-child(2) {
            padding-top: 18px;
        }

        .car-msg>div:nth-child(2)>div {
            width: 60px;
            height: 60px;
            border-radius: 5px;
            box-shadow: 0px 1px 7px 0px rgba(0, 0, 0, 0.3)
        }

        .car-msg>div:nth-child(2)>div img {
            width: 100%;
            height: 100%;
        }
        /*实用工具*/

        .tool {
            margin-top: 12px;
            width: 100%;
            height: 120px;
            padding: 5px 0;
            /*margin-bottom:100px;*/
        }

        .tool>div:nth-child(1) {
            display: flex;
        }

        .tool>div:nth-child(1)>div:nth-child(1) {
            display: flex;
            flex: 5;
            justify-content: flex-start;
        }

        .tool>div:nth-child(1)>div:nth-child(2) {
            display: flex;
            flex: 5;
            justify-content: flex-end;
        }

        .tool>div:nth-child(1)>div:nth-child(1)>div:nth-child(1) {
            width: 4px;
            height: 17px;
            background-color: #0A5AFA;
        }

        .tool>div:nth-child(1)>div:nth-child(1)>div:nth-child(2) {
            font-size: 16px;
            color: #1B1B1B;
            font-weight: 500;
            margin-left: 6px;
            line-height: 22px;
            margin-top: -2px;
        }

        .tool>div:nth-child(2) {
            margin-top: 12px;
        }

        .tool>div:nth-child(2)>div {
            text-align: center;
            width: 24%;
            display: inline-block;
            padding-bottom: 0.4rem;
        }
        /*第一个图*/

        .tool>div:nth-child(2)>div:nth-child(1)>div:nth-child(1) {
            width: 24px;
            height: 24px;
            display: inline-block;
        }

        .tool>div:nth-child(2)>div:nth-child(1)>div:nth-child(1) img {
            width: 100%;
            height: 100%;
        }
        /*第二个*/

        .tool>div:nth-child(2)>div:nth-child(2)>div:nth-child(1) {
            width: 24px;
            height: 24px;
            display: inline-block;
        }

        .tool>div:nth-child(2)>div:nth-child(2)>div:nth-child(1) img {
            width: 100%;
            height: 100%;
        }
        /*第三个*/

        .tool>div:nth-child(2)>div:nth-child(3)>div:nth-child(1) {
            width: 21px;
            height: 24px;
            display: inline-block;
        }

        .tool>div:nth-child(2)>div:nth-child(3)>div:nth-child(1) img {
            width: 100%;
            height: 100%;
        }
        /*第四个*/

        .tool>div:nth-child(2)>div:nth-child(4)>div:nth-child(1) {
            width: 24px;
            height: 22px;
            display: inline-block;
        }

        .tool>div:nth-child(2)>div:nth-child(4)>div:nth-child(1) img {
            width: 100%;
            height: 100%;
        }
        /*第五个*/

        .tool>div:nth-child(2)>div:nth-child(5)>div:nth-child(1) {
            width: 24px;
            height: 21px;
            display: inline-block;
        }

        .tool>div:nth-child(2)>div:nth-child(5)>div:nth-child(1) img {
            width: 100%;
            height: 100%;
        }

        .tool>div:nth-child(2)>div>div:nth-child(2) {
            color: #333333;
            opacity: 0.82;
            font-size: 14px;
            font-weight: 500;
        }
        /*底部样式*/

        .foot {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 60px;
            background-color: white;
            display: flex;
            text-align: center;
            box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.5);
        }

        .foot>div {
            flex: 3.3;
            padding: 5px 0 0;
        }

        .foot>div>div>img {
            height: 100%;
            width: 100%;
            object-fit: contain;
        }

        .foot>div:nth-child(1)>div:nth-child(1) {
            height: 23px;
            width: 26px;
            margin-top: 3px;
            display: inline-block;
        }

        .foot>div:nth-child(2)>div:nth-child(1) {
            height: 38px;
            width: 38px;
            display: inline-block;
            margin-top: -12px;
        }

        .foot>div:nth-child(3)>div:nth-child(1) {
            height: 26px;
            width: 20px;
            display: inline-block;
        }

        .foot>div>div:nth-child(2) {
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #AFAFAF;
            font-size: 10px;
            margin-top: -5px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="banner">
            <div>登录</div>
            <div>
                <div>
                    <div>0.00</div>
                    <div>钱包</div>
                </div>
                <div>
                    <div>0</div>
                    <div>代金券</div>
                </div>
                <div>
                    <div>0</div>
                    <div>洗车券</div>
                </div>
                <div>
                    <div>0</div>
                    <div>推荐有礼</div>
                </div>
            </div>
        </div>
        <!--我的订单-->
        <div class="mine-order">
            <div>
                <div>
                    <div></div>
                    <div>我的订单</div>
                </div>
                <div>
                    <div>
                        <img src="../image/icon/ARROWRIGHT@2x.png" alt="" />
                    </div>
                </div>
            </div>
            <div>
                <div onclick="MyOrder(0)">
                    <div><img src="../image/icon/dingd-yxd@2x.png" alt="" /></div>
                    <div>已下单</div>
                </div>
                <div onclick="MyOrder(1)">
                    <div><img src="../image/icon/dingd-dwc1@2x.png" alt="" /></div>
                    <div>待完成</div>
                </div>
                <div onclick="MyOrder(2)">
                    <div><img src="../image/icon/dingd-dwc@2x.png" alt="" /></div>
                    <div>待评价</div>
                </div>
            </div>
        </div>
        <!--我的订单-->
        <!--<div class="car-msg">
            <div>
                <div>
                    <div></div>
                    <div>车辆信息</div>
                </div>
                <div>
                    <div style="">车辆列表</div>
                    <div>
                        <img src="../image/icon/ARROWRIGHT@2x.png" alt="" />
                    </div>
                </div>
            </div>
            <div>
                <div><img src="../image/icon/fjia@2x.png" alt="" /></div>
            </div>
        </div>-->
        <!--实用工具-->
        <div class="tool">
            <div>
                <div>
                    <div></div>
                    <div>实用工具</div>
                </div>

            </div>
            <div>
                <div>
                    <div><img src="../image/icon/wd-clzz@2x.png" alt="" /></div>
                    <div>车辆追踪</div>
                </div>
                <div>
                    <div><img src="../image/icon/wd-cljc@2x.png" alt="" /></div>
                    <div>车辆检测</div>
                </div>
                <div>
                    <div><img src="../image/icon/wd-xcgj@2x.png" alt="" /></div>
                    <div>行车轨迹</div>
                </div>
                <div>
                    <div><img src="../image/icon/wd-dyjk@2x.png" alt="" /></div>
                    <div>电压监控</div>
                </div>
                <div>
                    <div><img src="../image/icon/wd-jscp@2x.png" alt="" /></div>
                    <div>驾驶测评</div>
                </div>
            </div>
        </div>
    </div>
    <!--底部-->
    <div class="foot">
        <div class="foot-cur">
            <div><img src="../image/icon/db-1@2x.png" alt="" /></div>
            <div>车辆养护</div>
        </div>
        <div class="foot-store">
            <div><img src="../image/icon/db-2@2x.png" alt="" /></div>
            <div>附近门店</div>
        </div>
        <div class="foot-pay">
            <div><img src="../image/icon/db-3@2x.png" alt="" /></div>
            <div>充值缴费</div>
        </div>
    </div>


</body>
<script type="text/javascript" src="../script/public-head.js"></script>
<script type="text/javascript" src="../script/rem.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/mui.js"></script>
<script type="text/javascript">
    apiready = function() {

    }
    headInner({
        title: '<div style="color:#000;">我的</div>',
        //headleft
        headl: '<div class="mine_1"><img src="../image/icon/Shape67@2x.png" alt="" /></div>',
        //headright
        headr: '<div class="msg_1"><img src="../image/icon/Shape11@2x.png" alt="" /></div>',
        color: "#ffffff", //默认是蓝色
        padding: "0px 0px 0px",
    })

    function MyOrder(index_) {
      console.log(index_);
        // api.openWin({
        //     name: 'MyOrder',
        //     url: '../html/MyOrder.html',
        //     pageParam: {
        //         active_index: index_
        //     }
        // });
    }
</script>

</html>
